<template>
  <div class="content">
    <div class="top">
      <el-button size="small" type="primary" @click="onCreateClick">新增员工</el-button>

      <el-button class="search" size="small" type="primary" @click="searchData">搜索</el-button>
      <el-input class="search input" size="small" v-model="form.mobile" style="width:150px;" placeholder="输入员工账号搜索"
        clearable></el-input>
      <el-select style="width:120px;" size="small" v-model="form.role_id" filterable class="search" placeholder="全部">
        <el-option label="全部" :value="0">全部</el-option>
        <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
      </el-select>

      <span class="guodu">员工角色：</span>
    </div>
    <el-table class="table-box" :data="tableData" style="width:100%" :cell-style="tc" :max-height="screenHight"
      :header-cell-style="tccolor">
      <el-table-column label="员工ID" prop="id" width="100" />
      <el-table-column label="员工名称" prop="nickName" width="120" />
      <el-table-column label="员工账号" prop="username" width="120" />
      <el-table-column label="员工角色" prop="roleNames"> </el-table-column>
      <el-table-column label="管理小店">
        <template slot-scope="scope">
          {{ scope.row.shop_num }}家
          <span class="light" @click="onSeeStoreManageListClick(scope.row)">（查看）</span>
        </template>
      </el-table-column>
      <el-table-column label="服务收益通用比例" prop="serviceRate">
        <template slot-scope="scope">
          {{ scope.row.serviceRate }}%
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">

          <span class="light" @click="onCreateClick(scope.row)">修改</span>
          <!-- <span class="light" @click="onDetailClick(scope.row)">权限详情</span> -->
          <span class="light" @click="onRemoveClick(scope.row)">移除</span>
          <span class="light" @click="onServiceIncomeClick(scope.row)">服务收益</span>
          <span class="light" @click="onCkeckFans(scope.row)">查看粉丝</span>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <el-pagination background @current-change="pageChange" :current-page="form.pageNum" :page-size="form.pageSize"
          :page-sizes="[15]" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </el-col>
    <!-- 查看员工管理的小店 -->
    <jdialog title="员工管理的门店" :visible.sync="showStoreManageList" width="800px">
      <div class="store-manage-list-box">
        <el-table class="table" :data="storeManageList" style="width:100%;" max-height="600" :cell-style="tc"
          :header-cell-style="tccolor">
          <el-table-column label="小店名称" prop="name" width="120"></el-table-column>
          <el-table-column label="小店账号" width="120" prop="">
            <template slot-scope="scope">{{
              scope.row.user ? scope.row.user.mobile : ''
            }}</template></el-table-column>
          <el-table-column label="门店地址" prop="shopAddress" width="160"></el-table-column>
          <el-table-column label="缴费类型" prop="sellerTypeText">
            <!-- <template slot-scope="scope">
              <p v-if="Number(scope.row.vip_shop_pay_type) === 0">无</p>
              <p v-else-if="Number(scope.row.vip_shop_pay_type) === 1">
                全额缴费
              </p>
              <p v-else-if="Number(scope.row.vip_shop_pay_type) === 2">
                押金缴费
              </p>
            </template> -->
          </el-table-column>
          <el-table-column label="小店状态" prop="status">
          </el-table-column>
        </el-table>
        <el-col :span="24">
          <div class="page">
            <el-pagination background @current-change="storeManagerListPageChange"
              :current-page="storeManageListForm.pageNum" :page-size="storeManageListForm.pageSize"
              layout="total, prev, pager, next, jumper" :total="storeManageListTotal"></el-pagination>
          </div>
        </el-col>
      </div>
    </jdialog>
    <MemberInfoDialog :visible.sync="memberInfoDialogShow" :id="tempId" :timestamp="timestamp" :staff_uid="tempStaffUid"
      @on-refresh-data="onRefreshData" :action="action" />
    <ServiceIncomeDialog ref="serviceIncomeDialog" :tableData="serviceIncomeData" :memberInfo="memberInfo" :uid="uid" />
  </div>
</template>

<script>
import {
  getMemberList,
  getMemberRoleList,
  deleteMember,
  getMemberManageStoreList,
  getMemberProfit,
  getMemberProfitList,
  adminDelete,
  roleList,
  manageSellerList
} from '@/api/member'
import { shopList } from "@/api/shopList";
import { checkGranted } from '@/config/permission'
import MemberInfoDialog from './components/memberInfoDialog'
import ServiceIncomeDialog from './components/serviceIncomeDialog'
export default {
  components: {
    MemberInfoDialog,
    ServiceIncomeDialog
  },
  data() {
    return {
      uid: 0,
      action: 1,
      roleList: [],
      query: {
        pageNum: 1,
        pageSize: 20,
        partnerId: sessionStorage.getItem('partnerId')
      },

      form: {
        name: 0,
        mobile: '',
        role_id: '',
        partnerId: 0,
        sellerId: 0,
        keyword: '',
        search: '',
        pageNum: 1,
        pageSize: 15
      },

      total: 0,
      tableData: [],
      tempId: 0,
      tempStaffUid: 0,
      showStoreManageList: false,
      dialogLoading: false,
      storeManageList: [],
      storeManageListForm: {
        memberId: 0,
        pageNum: 1,
        pageSize: 20,
        partnerId: 0
      },
      storeManageListTotal: 0,
      memberInfoDialogShow: false,
      serviceIncomeData: [],
      memberInfo: {},
      timestamp: null
    }
  },
  created() {
    this.getRoleData()
    this.getMemberData()
    this.updateTimestamp();
    // setInterval(() => {
    //   this.updateTimestamp();
    // }, 1000); // 每秒更新一次
  },
  methods: {
    updateTimestamp() {
      this.timestamp = Date.now();
    },
    onRefreshData() {
      this.form.pageNum = 1
      this.getMemberData()
    },
    getMemberData() {
      getMemberList(this.form).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.list || []
          // this.tableData = this.tableData.map((item,index) => {
          //   this.total = res.data.total
          //   if(item.roleIds[0] == 7){
          //     this.tableData.splice(index, 1);
          //     this.total--
          //   }

          // })

        } else {
          this.$message.error(res.message)
        }
      })
    },
    getRoleData() {
      roleList(this.query).then(res => {
        if (res.code === 200) {
          // res.data.data.forEach(item => {
          //   item.last_time_text = item.last_time || '无'
          // })
          console.log(res)
          this.roleList = res.data.list
        } else {
          this.$message.error(res.message)
        }
      })
      // getMemberRoleList().then(res => {
      //   if (res.code === 200) {
      //     this.roleList = res.data.data || []
      //   }
      // })
    },
    onCreateClick(row) {
      // const res = checkGranted(50101)
      // if (!res) {
      //   this.$message.error('对不起，您暂无该功能的权限')
      //   return
      // }
      this.updateTimestamp();
      this.tempId = row.id ? row.id : 0
      this.action = row.id ? 1 : 2
      this.memberInfoDialogShow = true
    },
    searchData() {
      this.getMemberData()
    },
    pageChange(page) {
      this.form.pageNum = page
      this.getMemberData()
    },
    onSeeStoreManageListClick(data) {
      console.log(data)
      this.storeManageList = []
      this.showStoreManageList = true
      this.storeManageListForm.pageNum = 1
      this.tempId = data.id
      this.tempStaffUid = data.staff_uid
      this.getMemberManageStoreData(data)
    },
    getMemberManageStoreData(row) {
      this.dialogLoading = true

      this.storeManageListForm.memberId = row.memberId
      this.storeManageListForm.partnerId = row.partnerId
      shopList(this.storeManageListForm).then(res => {
        this.dialogLoading = false
        if (res.code === 200) {
          // res.data.data.map(item => {
          //   item.status = (item.vip_shop_end_time * 1000) > new Date().getTime() ? '入驻中' : '已过期'
          // })
          this.storeManageList = res.data.list || []
          this.storeManageListTotal = res.data.total
        } else {
          this.$message.error(res.message)
        }
      })
    },
    storeManagerListPageChange(page) {
      this.storeManageListForm.pageNum = page
      this.getMemberManageStoreData()
    },
    onDetailClick(data) {
      this.tempId = data.id
      this.tempStaffUid = data.staff_uid
      this.memberInfoDialogShow = true
    },
    onRemoveClick(data) {
      const res = checkGranted(50102)
      if (!res) {
        this.$message.error('对不起，您暂无该功能的权限')
        return
      }
      this.$confirm(
        '移除该员工后，员工将不可操作小店的相关权限，是否继续？',
        '删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        adminDelete(data.id).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功!')
            this.form.pageNum = 1
            this.getMemberData()
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    getMemberProfitList(row) {
      const params = {
        uid: row.staff_uid
      }
      getMemberProfitList(params).then(res => {
        if (res.code === 200) {
          this.serviceIncomeData = res.data
        } else {
          this.$message(res.message)
        }
      })
    },
    getMemberProfit(row) {
      const params = {
        uid: row.staff_uid
      }
      getMemberProfit(params).then(res => {
        this.memberInfo = {
          name: row.name,
          mobile: row.mobile,
          profit_predict: res.data.profit_predict,
          profit_settled: res.data.profit_settled
        }
      })
    },
    onServiceIncomeClick(row) {
      this.uid = row.id
      console.log(row, 'row', this.uid)
      this.memberInfo = row
      // this.getMemberProfit(row)
      // this.getMemberProfitList(row)
      this.$refs.serviceIncomeDialog.show()
    },
    onCkeckFans(row) {
      this.$router.push({
        path: 'shopFanList',
        query: {
          inviter: row.username
        }
      })
    },
    tc() {
      return 'text-align:center; color:#333333; font-size:12px;'
    },
    tccolor() {
      return 'text-align:center;background-color:#f5f5f5; font-size:14px;'
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  background-color: #fff;
  height: 100%;
  padding: 10px 20px 0;
  box-sizing: border-box;

  .top {
    margin: 0 20px 20px;

    .search {
      float: right;
      margin-left: 12px;
    }

    .input {
      width: 140px;
    }

    .picker {
      float: right;
    }

    .guodu {
      float: right;
      line-height: 30px;
    }
  }

  .table-box {
    height: calc(100vh - 220px);

    .light {
      cursor: pointer;
      color: blue;

      &:not(last-child) {
        margin-right: 8px;
      }
    }
  }

  .pagination {
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 99;
  }

  .store-manage-list-box {
    padding: 10px 20px 20px;
    overflow: hidden;
  }

  .page {
    float: right;
    margin-top: 20px;
  }
}
</style>
